<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" th:href="@{backed/assets/images/favicon.png}">
  <title>Material Pro Admin Template - The Most Complete & Trusted Bootstrap 4 Admin Template</title>
  <!-- Bootstrap Core CSS -->
  <link th:href="@{backed/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <!-- Custom CSS -->
  <link th:href="@{backed/css/style.css}" rel="stylesheet">
  <link th:href="@{backed/js/layui.css}" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link th:href="@{backed/css/colors/blue.css}" id="theme" rel="stylesheet">
  <link th:href="@{backed/assets/plugins/element-ui/index.css}" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">

<div class="preloader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>

<div id="main-wrapper">

  <div th:replace="~{commons/commons::topbar}"></div>

  <div th:replace="~{commons/commons::sidebar}"></div>

  <div class="page-wrapper">

    <div class="container-fluid">

      <div class="row page-titles">
        <div class="col-md-5 col-8 align-self-center">
          <h3 class="text-themecolor m-b-0 m-t-0">歌单入库</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active">歌单</li>
          </ol>
        </div>

      </div>

      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-block" id="songListModel">
              <h2 class="card-title" style="display: inline-block; width: 60%">SongList Model</h2>
              <el-input type="text" @blur="selectKeyWord" style="max-height: 28px;max-width: 200px"
                        placeholder="歌单ID" v-model:value="songListId" lay-on="test-tips-color"></el-input>&nbsp;&nbsp;&nbsp;
              <el-button type="primary" plain @click="addSongListBtn">批量入库</el-button>
              <br>
              <span class="card-subtitle addSong"
                    lay-on="test-page-title">SongList Count<code>.&nbsp;{{ count }}</code>
              </span>

              <div class="table-responsive">
                <table class="table">
                  <thead>
                  <tr>
                    <th>#</th>
                    <th>songId</th>
                    <th>name</th>
                    <th>artist</th>
                    <th>cover</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,index) in dataList" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.song_id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.artist }}</td>
                    <td><img style="width: 50px;height: 50px" :src=item.cover alt=""></td>
                  </tr>
                  </tbody>
                </table>

              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div th:replace="commons/commons::footer"></div>

  </div>

</div>
<script th:src="@{backed/assets/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script th:src="@{backed/assets/plugins/bootstrap/js/tether.min.js}"></script>
<script th:src="@{backed/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script th:src="@{backed/js/jquery.slimscroll.js}"></script>
<!--Wave Effects -->
<script th:src="@{backed/js/waves.js}"></script>
<!--Menu sidebar -->
<script th:src="@{backed/js/sidebarmenu.js}"></script>
<!--stickey kit -->
<script th:src="@{backed/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js}"></script>
<!--Custom JavaScript -->
<script th:src="@{backed/js/custom.min.js}"></script>
<script th:src="@{backed/js/vue.js}"></script>
<script th:src="@{backed/js/layui.js}"></script>
<script th:src="@{backed/assets/plugins/element-ui/index.js}"></script>
<script th:src="@{backed/js/content/map.js}"></script>
<script th:replace="~{commons/commons::topbar_vue}"></script>
<script th:inline="javascript">

  const songListModel = new Vue({
    el: "#songListModel",
    data: {
      //1、歌曲数据集合
      dataList: null,

      //2、查询歌单ID
      songListId: '',

      //3、默认歌单ID
      songListIdDefault: "9276459946",

      //4、歌曲总数
      count: ""

    },
    mounted: function () {
      //1、加载渲染默认歌单信息
      this.selectSongList(this.songListIdDefault)
    },
    methods: {
      //1*批量查询
      selectSongList(data) {
        let that=this;
        SongList(data).done(function (res) {
          if (res.code === 200) {
            //1、数据添加到数据集dataList，并渲染至页面
            songListModel.dataList = res.data;
            songListModel.count = res.data.length;
            if(data !== that.songListIdDefault){
              that.$message({
                type: 'success',
                message: '歌单列表成功读取'
              });
            }

          } else {
            //2、提示信息
            that.$message({
              type: 'warning',
              message: '歌单ID不存在'
            });
          }

        })
      },

      //2*批量添加
      addSongListBtn() {
        let that = this;
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否执行歌曲入库? '),
            h('i', {style: 'color: teal'}, "数量：" + that.count)
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              addSongList(that.dataList).done(function (res) {
                if(res.code === 200){
                  instance.confirmButtonLoading = true;
                  instance.confirmButtonText = '执行中...';
                  setTimeout(() => {
                    done();
                    setTimeout(() => {
                      instance.confirmButtonLoading = false;
                    }, 300);
                  }, 600);
                }else{
                  that.$message({
                    type: 'warning',
                    message: '网络繁忙'
                  });
                }
              })
            } else {
              done();
            }
          }
        }).then(action => {
          //刷新记录
          that.pageSelection(that.page)
          that.$message({
            type: 'success',
            message: '歌单成功入库！'
          });
        });
      },

      //3、搜索框移出事件，请求接口数据
      selectKeyWord() {
        let that = this;
        if (that.songListId === '') {
          this.selectSongList(that.songListIdDefault);
        } else {
          this.selectSongList(that.songListId);

        }

      },
    }
  })
  // 搜索框小提示
  layui.use(function () {
    var layer = layui.layer;
    var util = layui.util;
    // 事件
    util.on('lay-on', {
      'test-tips-color': function () {
        layer.tips('失去焦点,自动检索', this, {
          tips: [1, '#1e9fff']
        });
      },
    })
  });
</script>
</body>

</html>
<script setup lang="ts">
</script>